日<template>
	<view class="openMemberBgc">
		<view class="memberTitle">
			会员特权
		</view>
		<view class="lookList">
			<view class="lookBox me-fx-row-start-c">
				<view class="lookBoxLeft">
					看的更多
				</view>
				<view class="lookBoxRight">
					每天不限次数查看用户
				</view>
			</view>
			<view class="lookBox me-fx-row-start-c">
				<view class="lookBoxLeft">
					看的更省
				</view>
				<view class="lookBoxRight">
					每天10次免费机会查看付费相册或社交帐号
				</view>
			</view>
			<view class="lookBox me-fx-row-start-c">
				<view class="lookBoxLeft">
					看的更久
				</view>
				<view class="lookBoxRight">
					每天阅后即焚照片的时间从2秒提升到6秒
				</view>
			</view>
			<view class="lookBox me-fx-row-start-c">
				<view class="lookBoxLeft">
					看的更爽
				</view>
				<view class="lookBoxRight">
					免费发布节目广播
				</view>
			</view>
		</view>
		<view class="memberTitle">
			选择套餐
		</view>
		<view class="scrollList me-fx-row-start-c">
			<view :class="[activeIndex == item.is_recommend ? 'activescrolBox scrolBox':'scrolBox']" @click="list(item.is_recommend,index,item.id)"
			 v-for="(item, index) in inforList.list">
				<view class="title">
					{{item.duration}}个月
				</view>
				<view class="scrollBi">
					{{item.price}}币
				</view>
				<view class="scrollBiTime">
					约{{item.price / item.duration}}币/月
				</view>
			</view>
		</view>
		<view class="nowOpen" @click="nowOpenBtn">
			立即开通
		</view>
		<!-- 底部 -->
		<view class="Covering" v-if="payShow">
			<block>
				<view class="paymentBottm">
					<view class="paymentHead me-fx-row-sb-c">
						<view class="">
							支付
						</view>
						<view class="">
							可用余额: {{keyongM}}社区币
						</view>
					</view>
					<view class="me-fx-row-sb-c payList">
						<view class="">
							支付项目
						</view>
						<view class="">
							特权兑换
						</view>
					</view>
					<view class="me-fx-row-sb-c payList">
						<view class="">
							支付总额
						</view>
						<view class="me-fx-col-sb-c ">
							<text><text class="weight">{{shequbi}}</text>社区币</text>
							<text>约{{moneyTime}}币/月</text>
						</view>
					</view>
					<view class="me-fx-row-start-c btnBox">
						<view class="rechargeBtn" @click="rechargeBtn">
							充值
							<text  v-html="html"></text>
						</view>
						<view class="sureBtn" @click="sureBtn">
							确认支付
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payShow: false,
				inforList: [],
				activeIndex: 1,
				id: '',
				shequbi: '',
				moneyTime: '',
				keyongM: '0.00',
				html:''

			}
		},
		created() {
			this.listData()
			this.haveMoney()
		},
		methods: {
			pay(){
				 
			},
			rechargeBtn() {
				this.pay()
				this.payShow = false
				// uni.navigateTo({
				// 	url: '../commonPage/pay'
				// })
			},
			sureBtn() {
				this.payShow = false
				this.$u.put('/member/create', {
						id: this.id
					}).then(res => {
						if (res) {
							console.log(res.data, 'resss')
							uni.showToast({
								title: '充值成功',
								duration: 1000,
								icon: 'none'
							})
						}
					})
					.catch((res) => {})

			},
			haveMoney() {
				this.$u.get('/wallet/money').then(res => {
						if (res) {
							console.log(res.data, 'resss')
							this.keyongM = res.data.money
						}
					})
					.catch((res) => {})
			},
			nowOpenBtn() {
				console.log(this.activeIndex, 'this.activeIndex')
				if (this.activeIndex == '-1') {
					uni.showToast({
						title: '请选择套餐',
						duration: 1000,
						icon: 'none'
					})
				} else {
					this.payShow = true
				}
			},
			list(is_recommend, index, id) {
				this.activeIndex = is_recommend
				this.id = id
				this.shequbi = this.inforList.list[index].price / this.inforList.list[index].duration
				this.moneyTime = this.inforList.list[index].price

			},
			listData() {
				this.$u.get('/member/package/index').then(res => {
						if (res) {
							console.log(res.data, 'resss')
							this.inforList = res.data
						}
					})
					.catch((res) => {})
			},
		}
	}
</script>

<style>
	.openMemberBgc {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.memberTitle {
		height: 98rpx;
		line-height: 98rpx;
		padding-left: 29rpx;
	}

	.lookList {
		background: rgba(255, 255, 255, 1);
		height: 322rpx;
		padding: 30rpx;
		width: 100%;

	}

	.lookBox {
		padding-bottom: 30rpx;
	}

	.payList {
		padding: 30rpx;
	}

	.scrollList {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		overflow-x: scroll;
		/*添加横向滚动条*/
		white-space: nowrap;
	}

	.lookBox .lookBoxLeft {
		width: 132rpx;
		height: 46rpx;
		background: rgba(185, 154, 255, 1);
		border-radius: 23rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 46rpx;
	}

	.lookBox .lookBoxRight {
		font-size: 22rpx;
		color: rgba(51, 51, 51, 1);
		margin-left: 15rpx;
		font-size: 28rpx;
	}

	.scrolBox {
		width: 228rpx;
		height: 253rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx;
		text-align: center;
		margin-right: 20rpx;
		padding: 20rpx;
	}

	.activescrolBox {
		border: 1rpx solid rgba(92, 20, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(226, 213, 255, 1);
	}

	.scrolBox .title {
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		padding: 30rpx 0 30rpx;
	}

	.scrollBi {
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
	}

	.scrollBiTime {
		font-size: 26rpx;
		color: rgba(102, 102, 102, 1);
		padding: 10rpx 0;
	}

	.nowOpen {
		width: 686rpx;
		height: 88rpx;
		background: #5C14FF;
		border-radius: 44px;
		font-size: 34rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 88rpx;
		margin: 166rpx auto 0;
	}

	.paymentBottm {
		width: 100%;
		height: 458rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		overflow: hidden;
	}

	.paymentBottm .paymentHead {
		background: rgba(34, 34, 34, 1);
		color: white;
		padding: 30rpx;
	}

	.weight {
		color: #333333;
		font-size: 50rpx;
	}

	.btnBox view {
		width: 50%;
		height: 110rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(230, 230, 231, 1);
		text-align: center;
		line-height: 110rpx;
	}

	.btnBox .rechargeBtn {
		font-size: 36rpx;
		color: rgba(51, 51, 51, 1);
	}

	.btnBox .sureBtn {
		font-size: 36rpx;
		color: rgba(255, 255, 255, 1);
		background: #222222;
	}
</style>
